<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#dragSource{
				float:left;
				width: 200px;
			}
			#dropTarget{
				float:right;
				border: 1px solid lightgray;
				width: 500px;
				height: 400px;
			}
		</style>
	</head>
	<body>
		<div id="dragSource">
			<img id="imgElement" src="img/smile.gif" draggable="true"> 
		</div>
		<div id="dropTarget">
		</div>
		
		<script>
			var dropTarget = document.getElementById("dropTarget");
			var imgElement = document.getElementById("imgElement");
			var draggedElement = null;
			
			imgElement.addEventListener("dragstart", function(){
				draggedElement = window.event.target;
				window.event.dataTransfer.effectAllowed = "copy";
				console.log("Drag Start");
			});
			imgElement.addEventListener("dragend", function(){
				draggedElement = null;
				console.log("Drag End");
			});
			dropTarget.addEventListener("dragenter", function(){
				console.log("Drag Enter");
			});
			dropTarget.addEventListener("dragover", function(){
				//在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。
				console.log("Drag Over");
				event.preventDefault();
			});
			dropTarget.addEventListener("dragleave", function(){
				console.log("Drag Leave");
			});
			dropTarget.addEventListener("drop", function(event){
				if(draggedElement){
					var node = draggedElement.cloneNode();
					dropTarget.appendChild(node);
				}
			});
		</script>
	</body>
</html>
